<template>
  <div class="g-bd">
    <div class="graw">
      <div class="u-title">
        <h3>
          <span class="f-ff2">个人设置</span>
        </h3>
      </div>
      <ul class="m-tabs">
        <li class="fst">
          <a href="javascript:void(0)" class="z-slt">
            <em>基本设置</em>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            <em>绑定设置</em>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            <em>隐私设置</em>
          </a>
        </li>
      </ul>
      <form class="update_form" onsubmit="return false;">
        <div class="n-base">
          <div class="frm">
            <div class="itm">
              <label class="lab">昵称：</label>
              <input type="text" class="u-txt txt" id="nickname"
                     :class="className"
                     maxlength="30" v-model="nickname" @blur="getNickname(nickname)">
              <div class="u-err" v-if="isError">
                <i class="icn-25"></i>
                <span class="nick">昵称重复！</span>
              </div>
            </div>
            <div class="itm">
              <label class="lab">介绍：</label>
              <div class="u-txtwrap">
                <textarea class="area"></textarea>
                <span class="zs">300</span>
              </div>
            </div>
            <div class="itm">
              <label class="lab">性别：</label>
              <div class="f-cb">
                <label class="check">
                  <input type="radio" name="gender" checked class="u-rdi" v-model="gender" value="1"> 男
                </label>
                <label class="check">
                  <input type="radio" name="gender" checked class="u-rdi" v-model="gender" value="2"> 女
                </label>
              </div>
            </div>
            <div class="itm" style="z-index: 411;">
              <label class="lab">生日：</label>
              <div class="u-slt u-slt-1">
                <span class="curr">{{ year }}</span>
                <i class="btn" @click="showYear=!showYear"></i>
                <ul v-if="showYear">
                  <li class="f-thlde" v-for="(item) in (103)" :key="item">
                    <a href="#" @click.prevent="year=2023-item;showYear=false">{{ 2023 - item }}</a>
                  </li>
                </ul>
              </div>
              <span class="wrd">年</span>
              <div class="u-slt u-slt-2">
                <span class="curr">{{ month }}</span>
                <i class="btn " @click="showMonth=!showMonth"></i>
                <ul v-if="showMonth">
                  <li class="f-thlde" v-for="(item) in (12)" :key="item">
                    <a href="#" @click.prevent="month=item<10?'0'+item:item;showMonth=false">
                      {{ item < 10 ? '0' + item : item }}
                    </a>
                  </li>
                </ul>
              </div>
              <span class="wrd">月</span>
              <div class="u-slt u-slt-3">
                <span class="curr">{{ day }}</span>
                <i class="btn" @click="showDay=!showDay;date(year,month)"></i>
                <ul v-if="showDay && !isNaN(parseFloat(days)) && isFinite(days)">
                  <li class="f-thlde" v-for="item in days">
                    <a href="#" @click.prevent="day=item<10?'0'+item:item;showDay=false">
                      {{ item < 10 ? '0' + item : item }}
                    </a>
                  </li>
                </ul>
              </div>
              <span class="wrd">日</span>
            </div>
            <div class="itm itm-1" style="z-index: 400;">
              <label class="lab">地区：</label>
              <div class="u-slt">
                <span class="curr">{{ province }}</span>
                <i class="btn" @click="showArea=!showArea"></i>
                <ul v-if="showArea">
                  <li class="f-thlde" v-for="(item,index) in area.city" :key="index">
                    <a href="#" @click.prevent="province=item;showArea=false;getCity(index)">{{ item }}</a>
                  </li>
                </ul>
              </div>
              <div class="u-slt">
                <span class="curr f-thlde">{{ city }}</span>
                <i class="btn" @click="showCity=!showCity"></i>
                <ul v-if="showCity">
                  <li class="f-thlde" v-for="(item,index) in cities" :key="index">
                    <a href="#" @click.prevent="city=item;showCity=false">{{ item }}</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="itm ft">
              <a href="javascript:void(0)" class="u-btn1 u-btn">
                <i>保 存</i>
              </a>
              <a href="javascript:void(0)" class="u-btn2 u-btn">
                <i>取 消</i>
              </a>
            </div>
          </div>
          <div class="avatar">
            <img src="http://p1.music.126.net/tadlxxovbXE6MYf1EnFPYA==/109951164856130048.jpg?param=140y140" alt="">
            <span class="btm"></span>
            <a href="javascript:;" class="upload">更换头像</a>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import area from "@/http/area";
import cities from "@/http/city";
import province from "@/http/province";
import {formatDate} from "@/utils/formatDate";

export default {
  name: "index",
  data() {
    return {
      showYear: false,
      showMonth: false,
      showDay: false,
      showArea: false,
      showCity: false,
      isError: false,
      year: '--',
      month: '01',
      day: '-',
      days: '',
      area: area,
      province: '',
      city: '',
      cities: [],
      localCities: cities,
      localCity: '',
      nickname: '',
      name: '',
      className: '',
      gender: '',
      provinces: province,
      provinceCode: '',
      cityCode: '',
      birthday: ''
    }
  },
  watch: {
    year: {
      handler(newVal) {
        if (this.month == 2) {
          if (!(this.year % 400 == 0 || (this.year % 4 == 0 && this.year % 100 != 0))) {
            if (this.day >= 29) {
              this.day = 28
            }
          }
        }
        if ((this.month == 4 || this.month == 6 || this.month == 9 || this.month == 11)) {
            if (this.day >= 31) {
              this.day = 30
            }
        }
        this.date(newVal, this.month)
        this.showDay = false
      },
      immediate: true
    },
    month: {
      handler(newVal) {
        if (this.month == 2) {
          if (!(this.year % 400 == 0 || (this.year % 4 == 0 && this.year % 100 != 0))) {
            if (this.day >= 29) {
              this.day = 28
            }
          }
        }
        if ((this.month == 4 || this.month == 6 || this.month == 9 || this.month == 11)) {
          if (this.day >= 31) {
            this.day = 30
          }
        }
        this.date(this.year, newVal)
        this.showDay = false
      },
      immediate: true
    },
  },
  methods: {
    getProvince(provinceCode, cityCode) {
      provinceCode = provinceCode.toString().slice(0, 4)
      cityCode = cityCode.toString().slice(0, 4)

      if (provinceCode == 1100 || provinceCode == 1200 || provinceCode == 3100 || provinceCode == 5000) {
        provinceCode = 1000
        cityCode = cityCode.toString().slice(0, 3) + '0'
      }
      if (provinceCode == 8100 || provinceCode == 8200) {
        provinceCode = 8100
        cityCode = cityCode.toString().slice(0, 3) + '0'
      }
      console.log(provinceCode, cityCode)
      for (let i = 0; i < this.provinces.provinces.length; i++) {
        if (this.provinces.provinces[i].code == provinceCode) {
          this.province = this.provinces.provinces[i].name
          let result = this.provinces.provinces[i].cities
          let list = []
          result.forEach(item => {
            list.push(item.name)
          })
          this.cities = list
          for (let j = 0; j < result.length; j++) {
            if (result[j].code == cityCode) {
              this.city = result[j].name
            }
          }
        }
      }
    },
    async getNickname() {
      if (this.name != this.nickname) {
        let result = await this.$API.reqNickname(this.nickname)
        console.log(result)
        if (result.data.duplicated) {
          this.isError = true
          this.className = 'u-txt-err'
        } else {
          this.isError = false
          this.className = ''
        }
      }
    },
    getCity(index) {
      this.cities = this.area.cityArr[index]
      this.city = this.cities[0]
    },
    date(year, moth) {
      if (!isNaN(parseFloat(year)) && isFinite(year)) {
        switch (Number(moth)) {
          case 1:
          case 3:
          case 5:
          case 7:
          case 8:
          case 10:
          case 12:
            this.days = 31
            break;
          case 2:
            if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {
              this.days = 29
            } else {
              this.days = 28
            }
            break;
          case 4:
          case 6:
          case 9:
          case 11:
            this.days = 30
            break;
        }
      } else {
        return false
      }
    }
  },
  created() {
    this.$store.dispatch('userInfo/Account', this.$store.state.track.user.cookies)
    setTimeout(() => {
      if (this.$store.state.userInfo.userinfo.city) {
        this.nickname = this.$store.state.userInfo.userinfo.nickname
        this.name = this.$store.state.userInfo.userinfo.nickname
        this.gender = this.$store.state.userInfo.userinfo.gender
        this.provinceCode = this.$store.state.userInfo.userinfo.province
        this.cityCode = this.$store.state.userInfo.userinfo.city
        this.birthday = this.$store.state.userInfo.userinfo.birthday
      }
      if (this.gender == 0) {
        this.gender = 1
      }
      if (this.birthday >= 0) {
        let birthday = formatDate(this.birthday)
        let birthdayList = birthday.split('-')
        this.year = birthdayList[0]
        this.month = birthdayList[1]
        this.day = birthdayList[2]
      }
      this.getProvince(this.provinceCode, this.cityCode)
    }, 500)
  }
}
</script>

<style scoped lang="less">
.g-bd {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;

  .graw {
    padding: 40px;

    .u-title {
      border-bottom: none;
      height: 40px;

      h3 {
        float: left;
        font-size: 24px;
        font-weight: normal;

        .f-ff2 {
          font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
        }
      }
    }

    .m-tabs li, .m-tabs a, .m-tabs em {
      float: left;
      height: 39px;
      font-size: 14px;
      background-image: url("../../assets/tab.png");

    }

    .m-tabs {
      height: 39px;
      border: 1px solid #ccc;
      border-width: 0 1px;
      background-position: 0 0;
      background-repeat: repeat-x;
      background-image: url("../../assets/tab.png");

      .fst {

      }

      li {
        position: relative;
        left: -1px;

        .z-slt {
          background-position: left -90px;

          em {
            background-position: right -90px;
          }
        }

        a {
          padding-left: 2px;
          color: #333;

          em {
            height: 37px;
            width: 134px;
            padding: 2px 2px 0 0;
            line-height: 37px;
            cursor: pointer;
            text-align: center;

          }
        }
      }
    }

    .update_form {
      .n-base {
        margin-top: 30px;

        .frm {
          float: left;
          width: 340px;
          margin-right: 30px;

          .itm {
            position: relative;
            zoom: 1;
            min-height: 32px;
            margin-bottom: 10px;
            padding-left: 38px;

            .n-base .txt, .n-base .area {
              width: 292px;
            }

            .lab {
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              width: 38px;
              line-height: 32px;
              text-align: right;
            }

            .wrd {
              margin: 0 12px 0 6px;
              line-height: 32px;
              float: left;
            }

            .u-slt {
              float: left;
              position: relative;
              margin-right: 20px;
              width: 100px;
              height: 28px;
              background-position: 0 -47px;
              cursor: pointer;
              background-image: url("../../assets/sprite.png");

              .curr {
                display: block;
                width: 60px;
                padding-left: 7px;
                line-height: 28px;
              }

              .btn {
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                width: 32px;
                height: 28px;
                background-position: -169px -47px;
                background-image: url("../../assets/sprite.png");

              }

            }

            .u-slt {
              ul {
                position: absolute;
                top: 28px;
                width: 98px;
                max-height: 150px;
                overflow: auto;
                background: #fff;
                border: 1px solid #cdcdcd;
                border-top: none;

                li {
                  line-height: 26px;

                  a {
                    display: block;
                    height: 26px;
                    padding-left: 9px;
                    color: #666;
                  }
                }
              }

            }

            .u-slt-1 {
              width: 74px;
              margin-right: 0px;

              ul {
                width: 72px;
                position: absolute;
                top: 28px;
                max-height: 150px;
                overflow: auto;
                background: #fff;
                border: 1px solid #cdcdcd;
                border-top: none;
              }
            }

            .u-slt-2, .u-slt-3 {
              margin-right: 0px;
              width: 60px;

              ul {
                width: 58px;
              }
            }

            .f-cb {
              .check {
                float: left;
                margin: 9px 20px 0 0;
              }
            }

            .u-txtwrap {
              padding-right: 14px;
              position: relative;
              zoom: 1;

              .area {
                width: 292px;
                height: 122px;
                margin-right: -20px;
                margin: 0;
                padding: 5px 6px 6px;
                border: 1px solid #cdcdcd;
                border-radius: 2px;
                line-height: 19px;
                box-sizing: content-box;
              }

              .zs {
                position: absolute;
                bottom: 8px;
                right: 10px;
                color: #D0D0D0;
              }
            }

            .u-txt {
              width: 292px;
              height: 19px;
              margin: 0;
              padding: 5px 6px 6px;
              border: 1px solid #cdcdcd;
              border-radius: 2px;
              line-height: 19px;
              box-sizing: content-box;
            }

            .u-txt-err {
              background-position: 0 -200px;
              border-color: #F08B8B;
              color: #c20c0c;
            }

            .u-err {
              height: 17px;
              margin-top: 5px;
              line-height: 17px;
              color: #e33232;

              .icn-25 {
                margin-right: 8px;
                width: 14px;
                height: 14px;
                background-position: -50px -270px;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
                background-image: url("../../assets/icon.png");
              }
            }
          }

          .itm-1 {
            padding-top: 3px;
          }

          .ft {
            margin-top: 40px;

            .u-btn, .u-btn i {
              display: inline-block;
              *display: inline;
              *zoom: 1;
              height: 31px;
              line-height: 31px;
              overflow: hidden;
              *line-height: 32px;
              vertical-align: top;
              text-align: center;
              cursor: pointer;
            }

            .u-btn {
              margin-right: 20px;
              padding: 0 5px 0 0;
              white-space: nowrap;
              background-image: url("../../assets/button2.png");

              i {
                padding: 0 15px 0 20px;
                pointer-events: none;
                background-image: url("../../assets/button2.png");
              }
            }

            .u-btn1 {
              color: #fff;
              background-position: right -428px;

              i {
                width: 40px;
                color: #fff;
                background-position: 0 -387px;
              }
            }

            .u-btn2 {
              color: #333;
              background-position: right -100px;

              i {
                color: #333;
                background-position: 0 -59px;
              }
            }
          }
        }

        .avatar {
          float: left;
          width: 140px;
          height: 140px;
          position: relative;
          zoom: 1;

          img {
            float: left;
            width: 140px;
            height: 140px;
          }

          .btm {
            background: #8e8e8e;
            opacity: 0.8;
          }

          .upload, .btm {
            display: block;
            position: absolute;
            width: 140px;
            height: 26px;
            left: 0;
            bottom: 0;
          }

          .upload {
            color: #fff;
            text-align: center;
            line-height: 26px;

          }
        }
      }
    }
  }
}
</style>